<script setup lang="ts">
import {
  Container,
  StorageType,
  Volume,
  VolumeMount
} from "@/views/domain/kubeHud/api/k8s";
import { computed, watch } from "vue";
import KSection from "@/views/domain/kubeHud/views/components/k-section/index.vue";
import KSegment from "@/views/domain/kubeHud/views/components/k-segment/index.vue";
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";

type Prop = {
  namespace?: string;
  storageType?: StorageType;
  volume?: Volume;
};
const props = defineProps<Prop>();

const container = defineModel<Container>("container");
// const volume = defineModel<Volume>("volume");

const volumeMounts = computed<VolumeMount | undefined>(() => {
  const mountIdx = container.value.volumeMounts?.findIndex(
    vm => vm.name === props.volume.name
  );
  if (mountIdx >= 0) {
    return container.value.volumeMounts[mountIdx];
  }
  return undefined;
});

type PermType = "ro" | "rw" | "idle";

const permType = computed<PermType>({
  get() {
    if (volumeMounts.value) {
      return volumeMounts.value.readOnly ? "ro" : "rw";
    }
    return "idle";
  },
  set(val: PermType) {
    if (val === "idle") {
      container.value.volumeMounts = container.value.volumeMounts?.filter(
        v => v.name !== props.volume.name
      );
    } else {
      const mountIdx = container.value.volumeMounts?.findIndex(
        v => v.name === props.volume.name
      );

      if (mountIdx >= 0) {
        container.value.volumeMounts[mountIdx].readOnly = val === "ro";
      } else {
        const mount: VolumeMount = {
          name: props.volume.name,
          readOnly: val === "ro"
        };
        container.value.volumeMounts = [
          ...(container.value.volumeMounts ?? []),
          mount
        ];
      }
    }
  }
});

const onVolumeChanged = () => {
  if (props.volume && volumeMounts.value) {
    volumeMounts.value.name = props.volume.name;
  }
};

watch(
  () => props.volume,
  () => {
    onVolumeChanged();
  },
  { immediate: true }
);
</script>

<template>
  <el-form class="mount-row" :disabled="!volume.name">
    <div class="row-item">
      {{ container.name }}
    </div>
    <ko-data-item
      v-model="permType"
      class="row-item"
      item-type="select"
      :options="[
        { label: '不挂载', value: 'idle' },
        { label: '只读', value: 'ro' },
        { label: '读写', value: 'rw' }
      ]"
    />
    <ko-data-item
      v-if="volumeMounts"
      v-model="volumeMounts.mountPath"
      class="row-item"
      :disabled="permType === 'idle'"
      placeholder="挂载路径"
      item-type="input"
    />
    <ko-data-item
      v-else
      class="row-item"
      :disabled="true"
      placeholder="挂载路径"
      item-type="input"
    />
  </el-form>
</template>
<style lang="scss" scoped>
.mount-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;

  background-color: var(--el-border-color);
  border-radius: 10px;

  justify-content: center;
  align-items: center;

  .row-item {
    flex-grow: 1;
    width: 30%;
  }
}
</style>
